<template>
  <div class="container">
    <el-button @click="qh">切换3-4列</el-button>
    <div class="width">
      <el-input v-model="width"></el-input>
      <el-button @click="testWidth">列2宽</el-button>
    </div>
    <vxe-table
      v-if="showTable"
      row-id="id"
      :align="allAlign"
      :data="tableData2"
      :tree-config="{
        lazy: true,
        rowField: 'id',
        hasChild: 'hasChild',
        loadMethod: treeLoad,
      }"
      :column-config="{ resizable: true }"
      @resizable-change="resizableChange"
      ref="xTable2"
      class="sortable-row-demo"
      :scroll-y="{ enabled: false }"
    >
      <vxe-column width="60">
        <template #default>
          <span class="drag-btn">
            <i class="vxe-icon--menu"></i>
          </span>
        </template>
        <template #header>
          <vxe-tooltip
            v-model="showHelpTip1"
            content="按住后可以上下拖动排序！"
            enterable
          >
            <i
              class="vxe-icon--question"
              @click="showHelpTip1 = !showHelpTip1"
            ></i>
          </vxe-tooltip>
        </template>
      </vxe-column>
      <vxe-column type="seq" width="100"></vxe-column>
      <template v-for="(column, index) in tableColumn">
        <vxe-column
          :field="column.prop"
          :title="column.label"
          :tree-node="index == 0"
          :key="'vxe-column' + index"
          :width="col2width"
          ref="VxeColumn"
        ></vxe-column>
      </template>
      <!-- <vxe-column type="seq" width="100"></vxe-column>
      <vxe-column field="column1" title="列1" tree-node></vxe-column>
      <vxe-column field="column2" title="列2"></vxe-column>
      <vxe-column field="column3" title="列3"></vxe-column>
      <vxe-column field="column4" title="列4"></vxe-column> -->
    </vxe-table>
    <!-- <vxe-table
      border
      row-key
      ref="xTable1"
      class="sortable-row-demo"
      :scroll-y="{ enabled: false }"
      :data="tableData"
    >
      <vxe-column width="60">
        <template #default>
          <span class="drag-btn">
            <i class="vxe-icon--menu"></i>
          </span>
        </template>
        <template #header>
          <vxe-tooltip
            v-model="showHelpTip1"
            content="按住后可以上下拖动排序！"
            enterable
          >
            <i
              class="vxe-icon--question"
              @click="showHelpTip1 = !showHelpTip1"
            ></i>
          </vxe-tooltip>
        </template>
      </vxe-column>
      <vxe-column field="name" title="Name"></vxe-column>
      <vxe-column field="sex" title="Sex"></vxe-column>
      <vxe-column field="age" title="Age"></vxe-column>
      <vxe-column field="address" title="Address" show-overflow></vxe-column>
    </vxe-table> -->
  </div>
</template>

<script>
import Sortable from '../../assets/sortable/sortable1.10.2'

export default {
  name: 'VxeTableDemo',
  data() {
    return {
      showHelpTip1: false,
      showTable: true,
      allAlign: null,
      width: '',
      col2width: 90,
      tableColumn: [
        {
          label: '列1',
          prop: 'column1',
        },
        {
          label: '列2',
          prop: 'column2',
        },
        {
          label: '列3',
          prop: 'column3',
        },
        {
          label: '列4',
          prop: 'column4',
        },
      ],
      tableData2: [
        {
          column1: '1-1',
          column2: '1-2',
          column3: '1-3',
          column4: '1-4',
          id: 1,
          parentId: null,
          hasChild: true,
        },
        {
          column1: '2-1',
          column2: '2-2',
          column3: '2-3',
          column4: '2-4',
          id: 2,
          parentId: null,
        },
        {
          column1: '3-1',
          column2: '3-2',
          column3: '3-3',
          column4: '3-4',
          id: 3,
          parentId: null,
          hasChild: 1,
        },
        {
          column1: '4-1',
          column2: '4-2',
          column3: '4-3',
          column4: '4-4',
          id: 4,
          parentId: null,
        },
        {
          column1: '5-1',
          column2: '5-2',
          column3: '5-3',
          column4: '5-4',
          id: 5,
          parentId: null,
        },
        {
          column1: '6-1',
          column2: '6-2',
          column3: '6-3',
          column4: '6-4',
          id: 6,
          parentId: null,
        },
        {
          column1: '7-1',
          column2: '7-2',
          column3: '7-3',
          column4: '7-4',
          id: 7,
          parentId: null,
        },
        {
          column1: '8-1',
          column2: '8-2',
          column3: '8-3',
          column4: '8-4',
          id: 8,
          parentId: null,
        },
        {
          column1: '9-1',
          column2: '9-2',
          column3: '9-3',
          column4: '9-4',
          id: 9,
          parentId: null,
        },
      ],
      tableData: [
        {
          id: 10001,
          name: 'Test1',
          nickname: 'T1',
          role: 'Develop',
          sex: 'Man',
          age: 28,
          address: 'Shenzhen',
        },
        {
          id: 10002,
          name: 'Test2',
          nickname: 'T2',
          role: 'Test',
          sex: 'Women',
          age: 22,
          address: 'Guangzhou',
        },
        {
          id: 10003,
          name: 'Test3',
          nickname: 'T3',
          role: 'PM',
          sex: 'Man',
          age: 32,
          address: 'Shanghai',
        },
        {
          id: 10004,
          name: 'Test4',
          nickname: 'T4',
          role: 'Designer',
          sex: 'Women',
          age: 23,
          address: 'Shenzhen',
        },
        {
          id: 10005,
          name: 'Test5',
          nickname: 'T5',
          role: 'Develop',
          sex: 'Women',
          age: 30,
          address: 'Shanghai',
        },
      ],
    }
  },
  props: {},
  components: {},
  watch: {},
  computed: {},
  methods: {
    rowDrop() {
      this.$nextTick(() => {
        const xTable = this.$refs.xTable2
        this.sortable1 = Sortable.create(
          xTable.$el.querySelector('.body--wrapper>.vxe-table--body tbody'),
          {
            handle: '.drag-btn',
            onEnd: ({ newIndex, oldIndex }) => {
              const currRow = this.tableData2.splice(oldIndex, 1)[0]
              this.tableData2.splice(newIndex, 0, currRow)
            },
          }
        )
      })
    },
    resizableChange({ $rowIndex, column, columnIndex, $columnIndex, $event }) {
      console.log($rowIndex, column, columnIndex, $columnIndex, $event)
    },
    testWidth() {
      this.showTable = false
      this.col2width = this.width
      // this.$refs.VxeColumn[1].columnConfig.renderWidth = Number(this.width)
      // this.$refs.VxeColumn[1].columnConfig.resizeWidth = Number(this.width)
      console.log(this.col2width, this.$refs.VxeColumn[1], this)
      // this.$forceUpdate()
      // this.$refs.VxeColumn[1].$forceUpdate()
      this.$nextTick(() => {
        this.showTable = true
      })
    },
    qh() {
      // this.tableColumn.push(this.tableColumn[2])
      // this.$delete(this.tableColumn, 2)

      const temp2 = this.tableColumn[2]
      const temp3 = this.tableColumn[3]
      this.tableColumn[2] = temp3
      this.tableColumn[3] = temp2
      this.$forceUpdate()
    },
    treeLoad({ row }) {
      return new Promise((resolve) => {
        const pId = row.id
        const data = []
        for (let i = 0; i < 10000; i++) {
          const item = {
            column1: `${i}-1`,
            column2: `${i}-2`,
            column3: `${i}-3`,
            column4: `${i}-4`,
            id: `${pId}-${i}`,
          }
          data.push(item)
        }
        setTimeout(() => {
          resolve(data)
        }, 500)
      })
    },
  },
  created() {
    this.rowDrop()
  },
  mounted() {},
  beforeDestroy() {
    if (this.sortable1) {
      this.sortable1.destroy()
    }
  },
}
</script>

<style scoped lang="scss">
.width {
  .el-input {
    width: 180px;
  }
}
</style>
